window.addEventListener("load", function () {
	//功能二:动态渲染API次数动态渲染
	// 1.获取后台数据,对数据进行遍历
	const apiData = [
		{ times: 4000, price: 1200, unitPrice: "0.3000" },
		{ times: 8000, price: 2000, unitPrice: "0.2500" },
		{ times: 40000, price: 8000, unitPrice: "0.2000" },
	];
	// 2.遍历时拼接html结构
	apiData.forEach(function (v) {
		//3.将html结构放入指定位置
		$(
			"#tab"
		).innerHTML += `<li data-price = ${v.price} data-unitprice = ${v.unitPrice}>${v.times}次</li>`;
	});
	// 页面加载时显示的内容
	// 给默认的第一个li加激活样式
	$("#tab li")[1].classList.add("active");
	//默认显示第一个的价格内容
	$("#price").innerHTML = `<p><strong class="fc-red" >￥${
		$("#tab li")[1].dataset.price
	}</strong>
	<span class="fz-12">约(${
		$("#tab li")[1].dataset.unitprice
	}元/次),仅限企业实名购买</span></p>
	`;

	//功能一:给Tab区增加激活样式
	//思考:如何将默认的第一个li不增加激活样式
	//1.获取节点
	// $("#tab li")
	$("#tab li").forEach(function (v, i) {
		//2.给li绑定点击事件
		v.addEventListener("click", function () {
			//思考:如何将默认的第一个li不增加激活样式
			//提示可以用索引进行判断,还可以用classList是否包含default判断(两种方式)
			//第二种方式:classList
			if (!this.classList.contains("default")) {
				//3.排他先清除所有激活类样式
				$("#tab li").forEach(function (e) {
					e.classList.remove("active");
				});
				//4.给自己增加激活类样式
				this.classList.add("active");
				// 功能三:点击tab按钮在下方联动生成对应的价格数据
				$(
					"#price"
				).innerHTML = `<p><strong class="fc-red" >￥${this.dataset.price}</strong>
				<span class="fz-12">约(${this.dataset.unitprice}元/次),仅限企业实名购买</span></p>
				`;
			}
			/*
			// 第一种方式:用索引
			if (i === 0) {
				this.classList.remove("active");
			} else {
				//3.排他先清除所有激活类样式
				$("#tab li").forEach(function (e) {
					e.classList.remove("active");
				});
				//4.给自己增加激活类样式
				this.classList.add("active");
			}
			*/
		});
	});

	// 功能四:点击主体tab栏激活对应样式
	//1.获取相关节点
	// $("#APIContList li")
	// 2.给每个li绑定点击事件
	/*
	$("#APIContList li").forEach(function (v, i) {
		v.addEventListener("click", function () {
			// 3.先排他,移出所有的激活样式
			$("#APIContList li").forEach(function (item, index) {
				item.classList.remove("active");
				// 通过对应的索引让卡片内容消失
				$("#contentLt div")[index].classList.remove("on");
			});
			// 4.再给自己增加激活样式
			this.classList.add("active");
			//功能五:点击tab显示对应的内容
			//1.获取相关节点
			// $("#contentLt div");
			//2.让所有的卡片内容消失
			//3.点击li通过对应的索引显示对应卡片的内容
			$("#contentLt div")[i].classList.add("on");
		});
	});
	*/
	// 直接用封装在util里面的函数tab()进行tab区样式的激活
	tab("#APIContList li", "active", "#contentLt div", "on");

	//配置
	const config = {
		selector: "#bannerBg",
		vx: 4, //点x轴速度,正为右，负为左
		vy: 4, //点y轴速度
		height: 2, //点高宽，其实为正方形，所以不宜太大
		width: 2,
		count: 100, //点个数
		color: "0, 0, 0", //点颜色
		stroke: "0,0,0", //线条颜色
		dist: 6000, //点吸附距离
		e_dist: 20000, //鼠标吸附加速距离
		max_conn: 10, //点到点最大连接数
	};
	//调用
	CanvasParticle(config);
});
